<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        机构管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>机构业务 /
        支持银行
      </p>
    </div>
    <div class="nav">
      <div class="nav_son">
        <span>已支持银行数：{{ bankNum }}</span>
      </div>
      <div class="nav_son1">
        <el-button type="primary" @click="opening()">添加银行</el-button>
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="银行类型：">
            <el-select
              v-model="form.region"
              placeholder="请选择活动区域"
              @change="list"
            >
              <el-option label="全部" value=""></el-option>
              <el-option label="支持" value="0"></el-option>
              <el-option label="不支持" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="tables">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        :header-cell-style="{ background: '#DCDCDC', color: '#222' }"
        border
        style="width: 98%; margin-bottom: 30px; margin-left: 2%"
      >
        <el-table-column
          type="selection"
          width=""
        ></el-table-column>
        <el-table-column label="银行卡类型" width="">
          <template slot-scope="scope">
            <span v-if="scope.row.cardType == 0">代付</span>
            <span v-if="scope.row.cardType == 1">支付</span>
            <span v-if="scope.row.cardType == 2">代付加支付</span>
            <!-- <el-button size="mini" @click="bank(scope.row,scope.row.uid,scope.row.name)">支持银行</el-button> -->
            <!-- <el-button size="mini" @click="shangyips(2,scope.row.uid,scope.row.agtType)">权益记录</el-button> -->
          </template>
        </el-table-column>
        <el-table-column label="银行卡支付状态" width="" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">支持</span>
            <span v-if="scope.row.status == 1">不支持</span>
            <!-- <el-button size="mini" @click="bank(scope.row,scope.row.uid,scope.row.name)">支持银行</el-button> -->
            <!-- <el-button size="mini" @click="shangyips(2,scope.row.uid,scope.row.agtType)">权益记录</el-button> -->
          </template>
        </el-table-column>
        <el-table-column
          prop="bankName"
          label="支持银行"
          width=""
          align="center"
        ></el-table-column>
        <el-table-column
          prop="bankCode"
          label="银行编号"
          width=""
          align="center"
        ></el-table-column>
        <el-table-column
          prop="d0DrawFee"
          label="机构d0手续费"
          width=""
          align="center"
        ></el-table-column>
        <el-table-column
          prop="d0TradeRate"
          label="机构d0交易费率"
          width=""
          align="center"
        ></el-table-column>
        <!-- <el-table-column
          prop="phone"
          label="商户d0手续费"
          width=""
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="商户d0交易费率"
          width=""
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="singleLowest"
          label="单笔最低限额"
          width=""
          align="center"
        ></el-table-column>
        <el-table-column
          prop="singleLimit"
          label="单笔最高限额"
          width=""
          align="center"
        ></el-table-column>
        <el-table-column
          prop="dayLimit"
          label="单卡单日限额"
          width=""
          align="center"
        ></el-table-column>
        <el-table-column
          prop="monthLimit"
          label="单卡单月限额"
          width=""
          align="center"
        ></el-table-column>
        <el-table-column
          prop="dayLimit"
          label="单卡单日交易笔数限制"
          width=""
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row, scope.row.uid, scope.row.name)"
              >修改</el-button
            >
            <!-- <el-button size="mini" @click="bank(scope.row,scope.row.uid,scope.row.name)">支持银行</el-button> -->
            <!-- <el-button size="mini" @click="shangyips(2,scope.row.uid,scope.row.agtType)">权益记录</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <div
        class="filter-container"
        style="
          padding-left: 40px;
          float: left;
          text-align: left;
          font-size: 16px;
          color: rgb(31, 165, 243);
          cursor: pointer;
          width: auto;
        "
      >
        <el-checkbox v-model="checkedAll">全选</el-checkbox>
      </div>

      <div
        @click="sub1()"
        class="filter-container"
        style="
          margin-left: 20px;
          float: left;
          text-align: left;
          font-size: 16px;
          color: rgb(31, 165, 243);
          cursor: pointer;
          width: auto;
        "
      >
        批量导出
      </div>
      <div style="clear: both"></div>

      <el-pagination
        style="text-align: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[20, 50, 100]"
        :page-size="form.number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="bankNum"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      no: "12458",
      tableData: [
        {
          master: "交易",
          uid: "1568974125",
        },
      ],
      bankNum: "", //支持银行数量
      checkedAll: false,
      currentPage: 1, //默认显示第一页
      pageSize: 10, //默认每页显示10条
      totalNum: 0, //总页数
      //查询列表数据
      form: {
        page: 1,
        number: 20,
        channelNo: "",
        channelName: "",
        channelType: "",
        status:""
      },
    };
  },
  created() {
    // console.log(this.$route.query.officeUid);
    //通道编号
    this.form.channelNo = this.$route.query.channelNo;
    //通道名称
    this.form.channelName = this.$route.query.channelName;
    //通道类型
    // let channelType = val.channelType
    // console.log()
    // console.log(this.form)
    // return
    this.getListData();
  },
  methods: {
    //获取列表数据
    getListData() {
      axios
        .post("/api/channel/queryBankByChannelCode", this.form)
        .then((res) => {
          // alert("请求成");
          console.log(res);
          this.tableData = res.data.data;
          this.bankNum = res.data.bankNum;
          // alert(res.data.data.)
        })
        .catch((err) => {
          console.log(err);
        });
    },
    list(val){
      // console.log(val)
      this.form.status = val
      this.getListData()
    },

    // 开通业务
    opening() {
      this.$router.push({
        path: "addChannelBacks",
        query: {
          channelCode: this.form.channelNo,
        },
      });
    },
    handleSizeChange(val) {
      this.form.number = val; //动态改变
      // this.getData();
    },
    handleCurrentChange(val) {
      /* alert(`当前页: ${val}`);*/
      // console.log(val)
      this.form.page = val; //动态改变
      this.getListData();
    },
    // 支持银行
    bank(val) {
      console.log(val);
      this.$router.push({
        path: "supportingBank",
        query: {
          officeUid: this.$route.query.officeUid,
          uid: val.uid,
        },
      });
    },
    handleEdit(val, valId, valNum) {
      this.$router.push({
        path: "addChannelBacks",
        query: {
          channelCode: this.form.channelNo,
          id: val.id,
          disb: "y",
        },
      });
    },
  },
};
</script>
<style scoped>
.con {
  padding: 20px;
  /* display: flex;
    flex-direction: column */
}
.contbox6_10 {
  width: 96%;
  min-height: 10px;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.titlelist6_10 {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #222;
  margin-top: 40px;
}
.nav {
  margin-left: 2%;
  margin-top: 25px;
  float: left;
  width: 96%;
  padding: 20px;
  /* height: 200px; */
  border: 1px #000 solid;
}
.nav_son {
  width: 100%;
  padding: 0 20px 20px 0;
}
.nav_son1 {
  width: 100%;
  /* float: left; */
  display: flex;
}
.nav_son span {
  margin-right: 20px;
  color: #000;
}
.tables {
  width: 98%;
  float: left;
  margin-top: 20px;
}
.el-button--primary {
  height: 44px;
}
</style>
